<script lang="ts" setup>
import { KeyValues } from '../../utils/types'
import { ruleStatusSelect } from '../../utils';
import { onMounted, ref } from 'vue';
import { apiRule } from '../../api';

const cls = 'page-rule-edit'

const props = defineProps<{
  row?: any
}>()

const emit = defineEmits(['close', 'submitted'])

const form = ref<KeyValues>({})

const close = () => emit('close')
const loading = ref(false)

const onOk = async () => {
  loading.value = true
  try {
    await apiRule.save(form.value)
    emit('submitted')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  if (props.row) {
    form.value = { ...props.row }
  }
})

</script>

<template>
  <ElDialog ref="dialogRef" title="编辑">
    <ElForm :class="`${cls}_form`" label-width="5em" label-suffix=" :">
      <ElFormItem label="规则名">
        <ElInput v-model="form.ruleName" disabled/>
      </ElFormItem>
      <ElFormItem label="APIID">
        <ElInput v-model="form.apiId" disabled/>
      </ElFormItem>
      <ElFormItem label="响应码" v-show="form.apiId">
        <ElInput v-model="form.responseCode" disabled/>
      </ElFormItem>
      <ElFormItem label="状态">
        <ElRadioGroup v-model="form.status">
          <ElRadio  v-for="_ in ruleStatusSelect.data" :key="_.value"  :label="_.value">{{ _.label }}</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
    </ElForm>
    <template #footer>
        <ElButton @click="close">取消</ElButton>
        <ElButton type="primary" @click="onOk" :loading="loading">确定</ElButton>
    </template>
</ElDialog>
</template>
